<template>
  <div class="managementContent">
    <el-row :gutter="20" v-if="iface.length">
      <el-col :span="6" v-for="item in iface_new" :key="item.name">
        <span class='managementTitle'>{{ item.name }}</span>
        <div class='managementLink'>
          <el-switch :width="lang === 'zh'?56:67" v-model="item.value" class="name switch" :disabled="item.enPortMode === 3" @change='protectAllChange($event, item.name)' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch>
        </div>
      </el-col>
    </el-row>
    <span class="managementTips">{{$t('提示：若通过将被拒绝业务口进行管理控制，将丢失管理控制，请谨慎操作')}}</span>
  </div>
</template>
<script>
import { changeServicePort } from '@/api/safe/access/protect'
import { getPhysicalApiArray } from '@/api/network/api/physical'
export default {
  name: 'ManagementTools',
  props: ['dataList'],
  data () {
    return {
      record: {},
      iface: [],
      lang: this.$i18n.locale,
      interfaceList: []
    }
  },
  computed:{
    iface_new() {
      const list = this.iface.map(item=>({
        ...item,
        index:Number(item.name.replace(/[a-z]/gi,''))
      }));
      return list.sort((a,b)=>a.index-b.index)
    }
  },
  watch: {
    dataList: {
      handler (value) {
        getPhysicalApiArray().then(res => { // strPhysicsName
          this.record = value
          this.iface = []
          if (res.status === 0) {
            this.interfaceList = res.info
            for (let item in this.record.iface) {
              for (let item1 of this.interfaceList) {
                if (item1.strPhysicsName === item) {
                  this.iface.push({ name: item, value: this.record.iface[item], enPortMode: item1.enPortMode })
                }
              }
            }
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    protectAllChange (status, name) {
      changeServicePort({ name: name, status: status }).then(res=>{
        this.$emit('protectSwitch')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.managementContent {
  margin-top: 15px;
  line-height: 40px;
  .el-col {
    width: 260px;
    margin-right: 3px;
    margin-bottom: 3px;
    background-color: #eeeeee;
  }
  .el-row {
    max-width: 1250px;
  }
  .ivu-switch-checked {
    border-color: #5fb878;
    background-color: #5fb878;
  }
}
.managementTips {
  font-size: 12px;
  color: red;
}
.managementTitle {
  width: 165px;
  margin-left: 10px;
  display: inline-block;
}
.managementLink {
  width: 60px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
}
</style>
